<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">	
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<link rel="stylesheet" href="../../css/oksub.css">
	<script type="text/javascript" src="../../lib/loading/okLoading.js"></script>
	<style type="text/css">
	.layui-form-item .layui-input-inline{
	 width:auto;
	}
	.layui-form-pane .layui-form-label{
	 width: 150px;
	}
	.layui-form-pane .layui-input-block{
	margin-left: 150px;
	}
	</style>
</head>
<body>
<div class="ok-body">
	<!--form表单-->
	<form class="layui-form layui-form-pane ok-form">
		<div class="layui-form-item"  >
			<label class="layui-form-label">名称</label>
			<div class="layui-input-block">
			   <select  id="UserId"  lay-filter="UserId" > </select>
			  </div>	
		</div>	
		<div class="layui-form-item">
			<label class="layui-form-label">調班日期</label>
			<div class="layui-input-block">	
				<input class="layui-input"  name="ATTEND_DATE" autocomplete="off" id="ATTEND_DATE"  >
			</div>	
		</div>
	    <input type="hidden" value="1" name="ORIGTYPE" autocomplete="off" id="ORIGTYPE">		
		<div class="layui-form-item ORIGTYPE1" >		
			<label class="layui-form-label">班別代碼</label>
			<div class="layui-input-block">	
			<input type="hidden"  name="ORIGPERIOD"id="ORIGPERIOD">
				<input class="layui-input"  id="ORIGCODE1" name="ORIGCODE1" autocomplete="off" >
			</div>
		</div>
			<div class="layui-form-item ORIGTYPE2" >
			<label class="layui-form-label">班別代碼</label>
			<div class="layui-input-block">	
				 <select  id = "ORIGCODE2" name = "ORIGCODE2"> </select>
				</div>	
		</div>
		<div class="layui-form-item ORIGTYPE2" >
		     <label class="layui-form-label">時間選擇</label>
			 <div class="layui-input-block">			
				 <select  id = "ORIGTIMETYPE" name = "ORIGTIMETYPE" lay-filter="ORIGTIMETYPE">
				   <option value='0'>全天</option>
				   <option value='1'>上午</option>
				   <option value='2'>下午</option>
				  </select>
			</div>	
		</div>
		
		
			<div class="layui-form-item">
			<label class="layui-form-label">申請類型</label>
			<div class="layui-input-block">	
				 <select  id = "TYPE" name = "TYPE"  lay-filter="TYPE">
				      <option value='1'>普通代碼</option>
					  <option value='2'>假期代碼</option>
				  </select>
				</div>
		</div>
		<div class="layui-form-item DIVTYPE1" >
			<label class="layui-form-label">申請代碼</label>
			<div class="layui-input-block">	
				 <select  id = "CODE1" name = "CODE1"  lay-filter="CODE1"></select>
				</div>	
		</div>
		
		<div class="layui-form-item DIVTYPE2" >
			<label class="layui-form-label">申請代碼</label>
			<div class="layui-input-block">	
				 <select  id = "CODE2" name = "CODE2"  lay-filter="CODE2"> </select>
				</div>
		</div>
		
			<div class="layui-form-item DIVTYPE2" >
			<label class="layui-form-label">申請時間</label>			
			<div class="layui-input-block">
				 <select  id = "TIMETYPE" name = "TIMETYPE" lay-filter="TIMETYPE">
				 <option value='0'>全天</option>
				 <option value='1'>上午</option>
				 <option value='2'>下午</option>				 
				  </select>
			</div>	
		</div>
		
		
		<div class="layui-form-item">
			<label class="layui-form-label">實際班別</label>
			<div class="layui-input-block">	
				<input class="layui-input" id="TIMEPERIOD" name="TIMEPERIOD" autocomplete="off"  >
			</div>	
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">申請理由</label>
			<div class="layui-input-block">	
				<input class="layui-input" id="REMARK" name="REMARK" autocomplete="off" >
			</div>	
		</div>
		
	</form>
	
</div>
<!--js逻辑-->
<script src="../../lib/layui/layui.js"></script>
<script src="../../js/okform.js"></script>
<script>     
    var ID = request("ID"); 
    function AcceptClick() {
    	layui.use([ "okUtils"], function () {
    		let okUtils = layui.okUtils;
    		let $ = layui.jquery;
    		var saveCondition = {};
    		saveCondition['ID'] = ID;
    		saveCondition['UserId'] = $("#UserId").val();
    		saveCondition['ATTEND_DATE'] = $("#ATTEND_DATE").val();
    	
    	    var ORIGTYPE = $("#ORIGTYPE").val();    		
    		saveCondition['ORIGTYPE'] =ORIGTYPE;
    		if(ORIGTYPE == 1){  
    		    $(".ORIGTYPE1").show();
			    $(".ORIGTYPE2").hide();
    			saveCondition['ORIGCODE'] = $("#ORIGCODE1").val();
        		saveCondition['ORIGPERIOD'] = $("#ORIGPERIOD").val();
        		saveCondition['ORIGTIMETYPE'] = 0;  //全天
    	    }else{    	         
    	        $(".ORIGTYPE1").hide();
			    $(".ORIGTYPE2").show();
    	    	saveCondition['ORIGCODE'] = $("#ORIGCODE2").val();
        		saveCondition['ORIGPERIOD'] = $("#ORIGCODE2").find("option:selected").attr("data-PERIOD");
        		saveCondition['ORIGTIMETYPE'] = $("#ORIGTIMETYPE").val();
    	    }
    	                                 	
    		var display =$('.DIVTYPE1').css('display');
    		if(display == 'none'){
    		    saveCondition['CODE'] = $("#CODE2").val();
    		    saveCondition['TYPE'] = 2;
    		    saveCondition['PERIOD'] =$("#CODE2").find("option:selected").attr("data-PERIOD");
        		saveCondition['TIMETYPE'] = $("#TIMETYPE").val();
        		
    		}else{
    		    saveCondition['CODE'] = $("#CODE1").val();
    		    saveCondition['PERIOD'] = $("#CODE1").val();
    		    saveCondition['TYPE'] = 1;
        		saveCondition['TIMETYPE'] = 0      //全天 		    
    		}
    		saveCondition['TIMEPERIOD'] = $("#TIMEPERIOD").val();
    		saveCondition['REMARK'] = encodeURI( $("#REMARK").val().trim());
    		
    		var searchcondition = JSON.stringify(saveCondition)
    		
    		okUtils.ajax("AttendancdAdjustmentServlet?method=save", "POST", {searchcondition: searchcondition}, true).done(function (response) {
				   console.log(response);
				  
				}).fail(function (error) {
					console.log(error)
				});
    	})
    
    }
    
    
	layui.use(["element", "form","jquery", "laydate", "okLayer", "okUtils", "okMock"], function () {
		let form = layui.form;
		let laydate = layui.laydate;
		let okLayer = layui.okLayer;
		let okUtils = layui.okUtils;
		let table = layui.table;
		let okMock = layui.okMock;
		let $ = layui.jquery;
		
		okLoading.close();		
		laydate.render({
            elem: '#ATTEND_DATE',
            type: "date"         
		 ,done: function(value, date, endDate){	
		     var date = value;
		     var UserId = $("#UserId").val();
		     var condidtion = {ATTEND_DATE:date,UserId:UserId};		     
		     var  searchcondition =JSON.stringify(condidtion);
		     okUtils.ajax("AttendancdCodeServlet?method=getActuCode", "get", {searchcondition:searchcondition}, true).done(function (response) {
				   var data =response.data;					   
				   $("#ORIGTYPE").val(data.TYPE);
				   if(data.TYPE == 1){
				       $(".ORIGTYPE1").show();
				       $(".ORIGTYPE2").hide();
				       $("#ORIGCODE1").val(data.CODE);
				       $("#PERIOD").val(data.PERIOD);
				       
				   }else if(data.TYPE == 2){				       
				       $(".ORIGTYPE1").hide();
				       $(".ORIGTYPE2").show();
				       $("#ORIGCODE2").val(data.CODE);
				       $("#PERIOD").val(data.PERIOD);
				       $("#ORIGTIMETYPE").val(data.TIMETYPE);	
				   }
				   $("#TIMEPERIOD").val(getActuTime());	
				   form.render();			
		     }).fail(function (error) {
					console.log(error)
			});
		     
		  }
        });	
		
		  form.on('select(TYPE)', function(data){
		      var val = data.value;
		      if(val == 1){
		          $(".DIVTYPE2").hide();
		          $(".DIVTYPE1").show();
		      }else  if(val == 2){
		          $(".DIVTYPE2").show();
		          $(".DIVTYPE1").hide();
		      }
		  });
		  
		  form.on('select(CODE1)', function(data){
		     $("#TIMEPERIOD").val( $("#CODE1").find("option:selected").attr("data-PERIOD"));
		  });
		  
		  
		  form.on('select(CODE2)', function(data){		    	 
		      $("#TIMEPERIOD").val(getActuTime());				 
		  });
		  
		  form.on('select(TIMETYPE)', function(data){		    	 
		      $("#TIMEPERIOD").val(getActuTime());				 
		  });
		  
		  function getActuTime(){
  		    var ORIGTYPE = $("#ORIGTYPE").val();  		 
  		    var timeType = $("#TIMETYPE").val();
  		    var schTime =  $("#ORIGPERIOD").val();	  		   
  		    
  		    schTime = schTime.replace(':', '').replace('-', '');
  		    var CODE = $("#CODE2").find("option:selected").attr("data-PERIOD");
  		    if(timeType == 0){
  		        return CODE;
  		    }else  if(timeType == 1) { //上午
  		      if(schTime == "00000000"){
  		          return "00000000";
  		        }else{
  		          return schTime.slice(4) + schTime.slice(4) - 4000000;  
  		        }   	   
  		        
  		    }else  if(timeType == 2) { //下午
  		        if(schTime == "00000000"){
  		          return "00000000";
  		        }else{
  		          return  schTime.substring(0,4) + (Number(schTime.substring(0,4)) + 400);
  		        }
  		    }
  		    
  		}
		  
		  
		  okUtils.ajax("AttendancdCodeServlet?method=getlistSelect", "get", null, true).done(function (response) {
			   var data =response.data;			 	
			  var txtconent2 = "<option value=''>请选择</option>";
			  var txtconent1 = "<option value=''>请选择</option>";
			  for(var i = 0; i < data.length; i ++){
			      if(data[i].TYPE == 1){
			          txtconent1 = txtconent1 + "<option value='"+data[i].CODE+"' data-PERIOD = '"+data[i].PERIOD+"' data-TYPE = '"+data[i].TYPE+"'>"+data[i].CODE + "</option>"
						   
			      }else if(data[i].TYPE == 2){
			    	  txtconent2 = txtconent2 + "<option value='"+data[i].CODE+"' data-PERIOD = '"+data[i].PERIOD+"' data-TYPE = '"+data[i].TYPE+"'>"+data[i].CODE + "</option>"
				 }
			 }			  
			  $("#ORIGCODE1").html(txtconent1);
			  $("#ORIGCODE2").html(txtconent2);
			  $("#CODE1").html(txtconent1);
			  $("#CODE2").html(txtconent2);
			  
		    	okUtils.ajax("UserServlet?method=getUserSelect", "get", null, true).done(function (response) {
					   var data =response.data;			 	
					  var txtconent = "<option value='0'>请选择</option>";
					  for(var i = 0; i < data.length; i ++){
						  txtconent = txtconent + "<option value='"+data[i].UserId+"'>"+data[i].Account + " "+data[i].RealName+"</option>"
					  }
					  $("#UserId").html(txtconent);
					  form.render();
					  if(ID){		 
							 okUtils.ajax("AttendancdAdjustmentServlet?method=getOneData", "get", {ID: ID}, true).done(function (response) {
								   var data =response.data;									
								   $("#UserId").val(data.UserId);
								   $("#ATTEND_DATE").val(data.S_ATTEND_DATE);
								 
								   
								   $("#ORIGPERIOD").val(data.ORIGPERIOD);
								   $("#ORIGTYPE").val(data.ORIGTYPE);								 
								   
								   if(data.ORIGTYPE == 1){
								       $(".ORIGTYPE2").hide();
								       $("#ORIGCODE1").val(data.ORIGCODE);
								      
								       
								   }else if(data.ORIGTYPE == 2){
								       $(".ORIGTYPE1").hide();	
								       $("#ORIGCODE2").val(data.ORIGCODE);
								       $("#ORIGTIMETYPE").val(data.ORIGTIMETYPE);								      
								   }		
								   
								   $("#TYPE").val(data.TYPE);
								   if(data.TYPE == 1){
								       $(".DIVTYPE2").hide();
								       $(".DIVTYPE1").show();
								       $("#CODE1").val(data.CODE);
								       
								   }else if(data.TYPE == 2){						       
								       $(".DIVTYPE2").show();
								       $(".DIVTYPE1").hide();
								       
								       $("#CODE2").val(data.CODE);
								       $("#TIMETYPE").val(data.TIMETYPE);								       
								   }
								   
								   $("#TIMEPERIOD").val(data.TIMEPERIOD);
								   $("#REMARK").val(data.REMARK);
								   form.render();
								}).fail(function (error) {
									console.log(error)
								});
						 }else{						     
						    $(".DIVTYPE2").hide();
						 	form.render();	 
						 }
					  
			
				}).fail(function (error) {
						console.log(error)
				});
			  
			
		  }).fail(function (error) {
				console.log(error)
		});
		  
		
		
	
			
	});
</script>
<!-- 行工具栏模板 -->
<script type="text/html" id="operationTpl">
	<a href="javascript:" title="编辑" lay-event="add"><i class="layui-icon">&#xe624;</i></a>
	<a href="javascript:" title="删除" lay-event="del"><i class="layui-icon">&#xe640;</i></a>
</script>
</body>
</html>
